<template>
  <div style="height: 100%; width: 100%">
    <div id="setting">
      <van-popover v-model:show="show" placement="left-start" :actions="actions" @select="onSelect">
        <template #reference>
          <van-button icon="setting-o" round>
            设置
          </van-button>
        </template>
      </van-popover>
    </div>
    <div class="default-box"/>
    <div id="userInfo">
      <van-image
          id="image"
          height="80px"
          round
          :src="userImage.url"
          width="80px"
          @click="showPreview(userImage.url)"
      />
      <div id="name">
        {{ username }}
      </div>
      <div class="infoBtn">
        <van-button class="p-space" icon="arrow" size="normal" @click="toEdit">个人资料</van-button>
      </div>
    </div>
    <div id="diaryInfo" class="infos">
      <div class="record">
        <span id="num">{{ diaryCount }}</span>
        <span>日记数量</span>
      </div>
      <div class="record">
        <span id="num">{{ recordDay }}</span>
        <span>记录天数</span>
      </div>
      <div class="record">
        <span id="num">{{ totalWords }}</span>
        <span>总字数</span>
      </div>
    </div>

    <div id="chart"/>
  </div>
</template>

<script setup lang="ts">

import {onMounted, ref, toRaw} from "vue";
import {getCurrentUser} from "../../services/user";
import {ImagePreview, Toast} from "vant";
import myAxios, {LOGIN_URL} from "../../plugins/myAxios";
import * as echarts from 'echarts';
import {useRouter} from "vue-router";

const user = ref();
const router = useRouter();

const username = ref('')

const diaryCount = ref('0')
const recordDay = ref('0')
const totalWords = ref('0')
const chartList = ref([])

const max = Math.max(...chartList.value)

const show = ref(false)

const userImage = ref({
  url: ''
})

const actions = ref([
  {text: '退出登录', icon: 'add-o'},
])

const VanImagePreview = ImagePreview.Component;

const showPreview = (url: any) => {
  ImagePreview([url]);
}
onMounted(async () => {
  user.value = await getCurrentUser();
  username.value = user.value.userName
  diaryCount.value = user.value.diaryCount
  /**
   * 处理时间
   */
  if (user.value.userBirthday) {
    user.value.userBirthday = user.value.userBirthday.split('T')[0];
  }
  /**
   * 注入头像
   */
  userImage.value.url = user.value.userAvatar
  /**
   * 获取数量、天数、总字数
   */
  await getRecord()
  /**
   * 初始化图表
   */
  echartsInit()
})

const onSelect = async () => {
  const res = await myAxios.post('/user/logout')
  if (res.code === 0) {
    Toast('退出成功');
    window.location.href = LOGIN_URL;
  }
}

const toEdit = () => {
  router.push('/user/edit')
}

const getRecord = async () => {
  const res = await myAxios.get('/user/record', {
    params: {
      userId: toRaw(user.value.id)
    }
  })
  if (res.code === 0) {
      recordDay.value = res.data.recordDay
      totalWords.value = res.data.totalWord
      chartList.value = res.data.chartList
  }
}

let myChart;
const echartsInit = () => {
  let elementById = document.getElementById('chart');
  let chartInstance = echarts.getInstanceByDom(elementById);
  if (chartInstance) {
    chartInstance.dispose();//销毁
  }
  myChart = echarts.init(elementById);
  myChart.setOption({
    title: {
      text: '日记统计图'
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: [
      {
        name: '月份',
        type: 'category',
        boundaryGap: true,
        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      }
    ],
    yAxis: {},
    series: [
      {
        data: chartList.value,
        type: 'line',
        smooth: true
      }
    ]
  });
}
</script>

<style scoped>
#userInfo {
  border-radius: 37px;
  background: #e0e0e0;
  box-shadow: -31px -31px 83px #dedede,
  31px 31px 83px #e2e2e2;
  position: relative;
  height: 130px;
  width: 93%;
  left: 4%;
  top: -20px;
}

#image {
  position: relative;
  top: 20%;
  left: 5%;

}

#name {
  left: 32%;
  position: absolute;
  font-weight: bold;
  font-size: 24px;
  top: 20%;
}

.p-space {
  font-weight: bold;
  color: darkgray;
  font-size: 14px;
  background-color: #e0e0e0;
  border: 0;
}

.infoBtn {
  position: absolute;
  left: 68%;
  top: 30%;
}

.header {
  text-align: center;
  margin-top: 15px;
  height: 22%;
}

#close {
  position: relative;
  left: 90%;
  top: 2%;
  height: 30px;
  width: 30px;
}

span {
  position: relative;
  top: 22%;
  right: 10%;
  font-size: 16px;
  font-weight: bold;
  color: grey;
}

#diaryInfo {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.record {
  position: relative;
  top: 1.5rem;
  font-weight: bold;
  color: darkgray;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}

#num {
  position: relative;
  top: -35px;
  left: 36%;
  font-size: 24px;
  margin: 0;
}

.infos {
  position: relative;
  height: 100px;
  width: 92%;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: inset 5px 5px 10px #d9d9d9, inset -5px -5px 10px #ffffff;
  left: 4%;
}

#setting {
  width: 22%;
  position: absolute;
  top: 1%;
  right: 5%;
}

#chart {
  height: 250px;
  position: relative;
  top: 60px;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 360px;
  height: 550px;
  background-color: #fff;
  border-radius: 20px;
}
</style>